<template>
  <div class="portal-article-container">
    

    <!-- 文章网格展示 -->
    <div class="portal-grid">
      <div 
        v-for="article in articles" 
        :key="article.articleId" 
        class="portal-card"
      >
        <router-link :to="`/article/${article.articleId}`" class="card-link">
          <!-- 图片区域 -->
          <div class="card-media">
            <div class="image-container">
              <img 
                :src="article.coverImage || '/static/images/default-article.jpg'" 
                :alt="article.title"
                class="article-image"
              >
            </div>
            <div class="card-badges">
              <span v-if="article.isTop === '1'" class="badge top-badge">
                <i class="el-icon-top"></i> 置顶
              </span>
              <span v-if="article.isHot === '1'" class="badge hot-badge">
                <i class="el-icon-star-on"></i> 热门
              </span>
            </div>
          </div>

          <!-- 内容区域 -->
          <div class="card-body">
            <h3 class="article-title">{{ article.title }}</h3>
            <p v-if="article.subtitle" class="article-desc">{{ article.subtitle }}</p>
            
            <div class="article-meta">
              <span class="meta-item author">
                <i class="el-icon-user-solid"></i> {{ article.author || '官方' }}
              </span>
              <span class="meta-item date">
                <i class="el-icon-date"></i> {{ formatDate(article.publishTime) }}
              </span>
            </div>
          </div>

          <!-- 底部统计 -->
          <div class="card-footer">
            <span class="stat-item">
              <i class="el-icon-view"></i> {{ article.viewCount || 0 }}浏览
            </span>
            <span class="stat-item">
              <i class="el-icon-chat-dot-round"></i> {{ article.commentCount || 0 }}评论
            </span>
          </div>
        </router-link>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-if="!articles || articles.length === 0" class="empty-state">
      <el-empty description="暂无内容，敬请期待" :image-size="200">
        <el-button type="primary" @click="$emit('refresh')">刷新试试</el-button>
      </el-empty>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  name: 'PortalArticleGrid',
  props: {
    category: {
      type: Object,
      required: true,
      default: () => ({
        categoryName: '默认分类',
        summary: ''
      })
    },
    articles: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    formatDate(date) {
      if (!date) return '未知时间';
      try {
        return dayjs(date).format('YYYY-MM-DD');
      } catch (e) {
        console.error('日期格式化错误:', e);
        return date;
      }
    }
  }
}
</script>

<style scoped>
/* 基础容器 */
.portal-article-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 15px;
}

/* 头部样式 */
.portal-header {
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f2f5;
}

.portal-title {
  font-size: 24px;
  color: #333;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  font-weight: 600;
}

.portal-title i {
  margin-right: 10px;
  color: #409EFF;
}

.portal-subtitle {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
}

/* 网格布局 */
.portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* 卡片样式 */
.portal-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.portal-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* 媒体区域 */
.card-media {
  position: relative;
  width: 100%;
  padding-top: 60%; /* 3:5 的宽高比 */
  overflow: hidden;
}

.image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.article-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.portal-card:hover .article-image {
  transform: scale(1.08);
}

/* 徽章样式 */
.card-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 8px;
}

.badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  color: white;
  display: flex;
  align-items: center;
}

.badge i {
  margin-right: 4px;
  font-size: 14px;
}

.top-badge {
  background: linear-gradient(135deg, #ff4d4f, #f5222d);
}

.hot-badge {
  background: linear-gradient(135deg, #faad14, #fa8c16);
}

/* 内容区域 */
.card-body {
  padding: 16px;
}

.article-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  height: 48px;
}

.article-desc {
  font-size: 14px;
  color: #666;
  margin: 0 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  height: 42px;
}

/* 元信息 */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.meta-item {
  font-size: 12px;
  color: #888;
  display: flex;
  align-items: center;
}

.meta-item i {
  margin-right: 4px;
  font-size: 14px;
}

.meta-item.author {
  color: #409EFF;
}

.meta-item.date {
  color: #888;
}

/* 底部统计 */
.card-footer {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: #f9f9f9;
  border-top: 1px solid #f0f0f0;
}

.stat-item {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
}

.stat-item i {
  margin-right: 4px;
  font-size: 14px;
}

/* 空状态 */
.empty-state {
  padding: 60px 0;
  text-align: center;
}

/* 响应式调整 */
@media (max-width: 992px) {
  .portal-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .portal-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .portal-title {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .portal-grid {
    grid-template-columns: 1fr;
  }
  
  .card-media {
    padding-top: 56.25%; /* 16:9 的宽高比 */
  }
}
</style>